<template>
  <div v-loading="loading">
    <el-row style="margin:16px 0">
      <el-col :span="8">
        <el-button @click="switchTab(1)" :type="adType==1 ? 'primary' : ''" size="medium">كىنو بەت</el-button>
        <el-button @click="switchTab(2)" :type="adType==2 ? 'primary' : ''" size="medium">تىياتىر بەت </el-button>
        <el-button @click="switchTab(3)" :type="adType==3 ? 'primary' : ''" size="medium">قويغۇچ بەت</el-button>
      </el-col>
      <el-col :span="8">
        <h1 style="text-align:center;margin:0">{{['باش بەت دومىلىما ئېلان','تىياتىر بەت دومىلىما ئېلان','كىنو قويۇش بېتىدىكى ئېلان'][adType-1]}}</h1>
      </el-col>
    </el-row>
    <el-table v-if="adType!=3" :data="adType==1 ? movieSwiper: tvSwiper" border>
      <el-table-column align="center" prop="index" label="كۆرۈنۈش تەرتىپى" width="120px">
        <template slot-scope="{row}">
          <el-input size="small" v-model="row.xh" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="prop" label="ئېلان رەسىمى">
        <template slot-scope="{row}">
          <el-image v-if="row.image" fit="contain" :preview-src-list="[row.image]" :src="row.image" alt=""></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="prop" label="رەسىم ئادىرىسى">
        <template slot-scope="{row}">
          <el-input v-model="row.image" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="prop" label="ئېلان ئادىرىسى">
        <template slot-scope="{row}">
          <el-input v-model="row.url" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="ئادىرىس تىپى">
        <template slot-scope="{row}">
          <el-select v-model="row.type" placeholder="">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="مەھشغۇلات">
        <template slot-scope="{$index}">
          <el-button type="danger" size="small" @click="removeLine($index)">يۇيۇش</el-button>
          <el-button size="small" v-if="$index==movieSwiper.length-1" @click="createNewLine" type="primary" icon="el-icon-circle-plus-outline"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form v-else :rules="formRules" ref="form" style="margin:24px" :model="form" label-width="120px">
      <el-form-item label="ئېلان ئىسمى:" prop="title">
        <el-input size="small" v-model="form.title" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="ھالىتى:" required prop="status">
        <el-switch v-model="form.status" active-text="ئېچىلدى" inactive-text="ئۆچۈرۈلدى"></el-switch>
      </el-form-item>
      <el-form-item label="ئېلان ئادىرىسى:" required prop="url">
        <el-input size="small" v-model="form.url" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="ئېلان تىپى:" required prop="type">
        <el-select v-model="form.type" placeholder="">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="ئېلان رەسىمى:" required prop="image">
        <el-input size="small" v-model="form.image" placeholder=""></el-input>
        <img :src="form.image" v-if="form.image" alt="">
      </el-form-item>
    </el-form>
    <el-row style="text-align:center;margin:24px 0">
      <el-button type="primary" @click="saveMovieSwiper">ساقلاش</el-button>
    </el-row>
  </div>
</template>

<script>
import { getAdConfig, setAdConfig } from '@/api/kino';
export default {
  name: 'Advertise',
  components: {},
  data() {
    return {
      adType: 1,//1是电影首页广告，2是剧集首页，3是播放页面广告
      movieSwiper: [],
      tvSwiper: [],
      typeOptions: [
        { label: 'كىنو ئادىرىس', value: 1 },
        { label: 'باشقا تور ئادىرىسى', value: 2 },
      ],
      loading: false,
      form: {
        type: 1,
        status: true
      },
      formRules: {}
    };
  },
  created() {
    this.loading = true;
    getAdConfig({ setting_name: 'movieSwiperConfig' }).then(res => {
      this.movieSwiper = res || []
      this.loading = false
    }).catch(err => {
      this.loading = false
    })
  },
  mounted() {

  },
  methods: {
    createNewLine() {
      if (this.adType == 1) {
        this.movieSwiper.push({ type: 1 })
      } else if (this.adType == 2) {
        this.tvSwiper.push({ type: 1 })
      }
    },
    removeLine(index) {
      if (this.adType == 1) {
        this.movieSwiper.splice(index, 1)
      } else if (this.adType == 2) {
        this.tvSwiper.splice(index, 1)
      }
    },
    saveMovieSwiper() {
      if (this.adType != 3) {
        let list = this.adType == 1 ? this.movieSwiper : this.tvSwiper
        for (let [index, item] of list.entries()) {
          if (!item.xh || !item.type || !item.url || !item.image) {
            this.$message.error(`${index + 1} -قۇرنى تۇللۇق كىرگۈزمەپسىز`);
            return
          } else {
            item.type = item.type;
            item.xh = Number(item.xh);
          }
        };
        list.sort((a, b) => a.xh - b.xh);
        this.loading = true
        setAdConfig({ setting_name: this.adType == 1 ? 'movieSwiperConfig' : this.adType == 2 ? 'tvSwiperConfig' : '', list }).then(res => {
          this.$message.success('ساقلاندى');
          this.loading = false
        }).catch(_ => {
          this.loading = false
        })
      } else {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            setAdConfig({
              setting_name: 'playerPageAdConfig',
              config: this.form
            }).then(res => {
              this.$message.success('ساقلاندى');
              this.loading = false
            }).catch(err => {
              this.loading = false
            })
          }
        })
      }
    },
    switchTab(xh) {
      if (xh == this.adType) return
      this.adType = xh;
      if (xh == 2) {
        this.loading = true
        getAdConfig({ setting_name: 'tvSwiperConfig' }).then(res => {
          this.tvSwiper = res || []
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      }
      if (xh == 3) {
        this.loading = true
        getAdConfig({ setting_name: 'playerPageAdConfig' }).then(res => {
          this.form = res || {};
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      }
    }
  },
};
</script>

<style scoped lang="scss">
</style>
